<template>
    <view class="feedback-list-item card-item">
        <view class="header">
            <view class="type">
                <text class="type-text">反馈类型:{{ data.FeedbackTypeName }}</text>
                <text class="time">{{ data.AddTime }}</text>
            </view>
            <view class="state">
                <text>{{ data.StatusName }}</text>
            </view>
        </view>
        <view class="item">
            <text class="value">{{ data.Content }}</text>
        </view>
        <view v-for="(item, index) in data.CustomValueList" :key="index">
            <view class="item" v-if="item.AttrName == '相关图片' || item.AttrValueType == 8">
                <view v-if="item.AttrValue">
                    <image
                        mode="aspectFill"
                        class="img"
                        v-for="(img, imgIndex) in getImg(item.AttrValue)"
                        :key="imgIndex"
                        :src="easyGetImgUrl(img)"
                        @tap="previewImage(img, getImg(item.AttrValue))" />
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        data: {
            type: Object,
            default: {},
        },
    },
    data() {
        return {}
    },
    mounted() {},
    methods: {
        goDetail() {
            let data = encodeURIComponent(JSON.stringify(this.data))
            this.easyGoTo("/pages_me/packet/feedback/detail?id=" + this.data.id + "&data=" + data)
        },
        getImg(value) {
            let arr = []
            if (value.includes(",")) {
                arr = value.split(",")
            } else {
                arr.push(value)
            }
            return arr
        },
        previewImage(e, list) {
            this.$emit("refreshBack", true)
            var current = e
            uni.previewImage({
                current: current,
                urls: list,
            })
        },
    },
}
</script>

<style lang="scss">
.feedback-list-item {
    margin: $app-page-padding;
    margin-top: 0;
    padding: $app-page-padding;
    position: relative;

    .img {
        width: 180rpx;
        height: 180rpx;
        margin-right: 10rpx;
        margin-top: 10rpx;
        border-radius: $border-radius-10;
    }

    .header {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 20rpx;

        .type {
            display: flex;
            flex: 1;
            flex-direction: column;

            .type-text {
                margin-bottom: 16rpx;
                font-weight: 700;
            }

            .time {
                display: flex;
                color: $app-color-text-tip;
            }
        }

        .state {
            display: flex;
            width: 110rpx;
            height: 58rpx;
            justify-content: center;
            align-items: center;
            border-radius: 50rpx 0 0 50rpx;
            background: $app-color-main;

            position: absolute;
            right: 0;
            top: 34rpx;
            text {
                color: $color-white;
            }
        }
    }

    .item {
        display: flex;
        flex-direction: column;
        margin-bottom: 10rpx;

        .value {
            margin-top: 10rpx;
            line-height: 40rpx;
            text-align: justify;
        }
    }
}
</style>
